<template>
  <div class="mainua">
    <el-form
      class="demo-form-inline"
      :model="form"
      label-width="140px"
      ref="form"
      validate-on-rule-change
    >
      <div class="main_spac1" style="padding-bottom: 5px">
        <div class="main_white padding10">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>优惠券</span>
            </div>
          </div>
          <!-- 主要部分 -->
          <div v-loading="listLoading" element-loading-text="加载中">
            <div class="marginTop20 marginLeft25">
              <el-form-item label="优惠券类型：" prop="type">
                <el-select
                  class="wid240"
                  v-model="form.type"
                  placeholder="优惠券类型"
                  disabled
                >
                  <el-option label="普通券" value="1"></el-option>
                  <el-option label="现金券" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优惠券名称：" prop="title">
                <el-input
                  class="wid240"
                  v-model="form.title"
                  placeholder="优惠券名称"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="使用说明：" prop="describe">
                <div style="width: 340px">
                  <el-input
                    type="textarea"
                    v-model="form.describe"
                    placeholder="使用说明"
                    maxlength="30"
                    show-word-limit
                    disabled
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="面值：" prop="money">
                <el-input
                  class="wid240"
                  v-model="form.money"
                  placeholder="面值"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="发放方式：" prop="grant_type">
                <el-select
                  class="wid240"
                  v-model="form.grant_type"
                  placeholder="发放方式"
                  disabled
                >
                  <el-option label="后台发放" value="1"></el-option>
                  <el-option label="用户领取" value="2"></el-option>
                  <el-option label="新用户" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可发放数量：" prop="num">
                <el-input
                  class="wid240"
                  v-model="form.num"
                  placeholder="可发放数量"
                  disabled
                ></el-input>
              </el-form-item>
              <div class="el-form-item el-form-item--small">
                <label for="" class="el-form-item__label" style="width: 110px"
                  ><div>有效期：</div></label
                >
                <div class="el-form-item__content" style="margin-left: 110px">
                  <div class="validity" v-if="form.expire_type == 1">
                    <el-form-item
                      label="固定日期内："
                      prop="time"
                      label-width="110px"
                    >
                      <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        disabled
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="validity" v-if="form.expire_type == 2">
                    <span class="span1">发放后</span>
                    <el-form-item prop="expire_days" label-width="0">
                      <!-- <el-input v-model="form.expire_days"></el-input> -->
                      <el-input-number
                        v-model="form.expire_days"
                        :controls="false"
                        disabled
                      ></el-input-number>
                    </el-form-item>
                    <span class="span2">天内有效</span>
                  </div>
                </div>
              </div>
              <el-form-item prop="name">
                <div slot="label">
                  领取数量限制<el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      每个用户能重复领取（含后台发放）的最大数量
                    </div>
                    <i class="el-icon-question"></i></el-tooltip
                  >：
                </div>

                <el-radio disabled v-model="form.get_limit" label="0"
                  >不限制</el-radio
                >
                <el-radio disabled v-model="form.get_limit" label="1">
                  最多可领取
                  <el-input-number
                    class="limit_number"
                    v-model="form.get_num"
                    :min="0"
                    :controls="false"
                    disabled
                  ></el-input-number
                  >张
                </el-radio>
              </el-form-item>
              <el-form-item label="订单金额限制：" prop="order_money_limit">
                <p v-show="form.type == 1" style="color: #606266">
                  订单金额满
                  <el-input-number
                    class="limit_number"
                    v-model="form.order_money_limit"
                    :min="Number(parseFloat(form.money) + 0.01)"
                    :controls="false"
                    disabled
                  ></el-input-number
                  >元使用
                </p>
                <p v-show="form.type == 2" style="color: #606266">不限制</p>
              </el-form-item>
              <el-form-item prop="activity_add">
                <div slot="label">
                  活动叠加<el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      是否允许参与了满减满赠，限时特卖活动的订单使用
                    </div>
                    <i class="el-icon-question"></i></el-tooltip
                  >：
                </div>
                <el-radio-group v-model="form.activity_add" disabled>
                  <el-radio label="0">可叠加</el-radio>
                  <el-radio label="1">不可叠加</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品限制：" prop="goods_limit">
                <el-radio-group v-model="form.goods_limit" disabled>
                  <el-radio :label="0">不限制</el-radio>
                  <el-radio :label="1">指定商品</el-radio>
                  <el-radio :label="2">排除商品</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="goods_container marginLeft20 marginRight20">
              <div class="goods_container_body main_table">
                <el-table
                  ref="multipleTable"
                  :data="list"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                >
                  <el-table-column label="序号">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="商品名称"
                    prop="goods_name"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="单位"
                    prop="unit"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="市场价"
                    prop="price"
                    :show-overflow-tooltip="true"
                  />
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_full_getGoodsSpu } from "@/api/marketing/marketing.js";
import { get_coupons_info } from "@/api/marketing/marketing_coupon.js";
import { parseTime } from "@/utils/index";
export default {
  name: "",
  data() {
    return {
      parseTime,
      form: {
        title: "",
        type: "1", //1  普通券  2  现金券
        describe: "",
        money: "", //金额
        num: "", //数量
        grant_type: "1", //1  后台  2用户领取  3新用户
        expire_type: "1", //1 固定日期  2 固定天数
        time: [],
        start_time: "",
        end_time: "",
        expire_days: "", //固定天数
        get_limit: "0", //领取限制 0 不限制 1限制
        get_num: "", //限制数量
        order_money_limit_radio: "",
        order_money_limit: "", //使用金额限制
        activity_add: "0", //活动叠加 0 可叠加 1不可叠加
        goods_limit: "", //0 不限制 1 部分使用 2 排除商品
        goods_data: "", //商品数据
      },
      goods_name: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      number: "",
      list: [],
      // 监听滚动
      searchBarFixed: false,
      id: "",
      listLoading: false,
    };
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 200
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },

    handeleDel(index) {
      this.list.splice(index, 1);
    },
    get_coupons_info() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      get_coupons_info(data).then((res) => {
        if (res.errcode == 0) {
          let info = res.data.info;
          this.form.type = String(info.type);
          this.form.title = info.title;
          this.form.describe = info.describe;
          this.form.money = info.money;
          this.form.num = info.num;
          this.form.grant_type = String(info.grant_type);
          this.form.expire_type = String(info.expire_type);
          let time1 = this.parseTime(info.start_time, "{y}-{m}-{d}");
          let time2 = this.parseTime(info.end_time, "{y}-{m}-{d}");
          this.form.time = [time1, time2];
          this.form.expire_days = info.expire_days;
          this.form.get_limit = String(info.get_limit);
          this.form.get_num = info.get_num;
          this.form.order_money_limit = info.order_money_limit;
          this.form.activity_add = String(info.activity_add);
          this.form.goods_limit = info.goods_limit;
          this.list = JSON.parse(info.goods_data);
        } else {
          this.$message.error(res.errmsg);
        }
        this.listLoading = false;
      });
    },
  },
  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
    }
    this.get_coupons_info();
  },
};
</script>
<style lang='scss' scoped>
.validity {
  display: flex;
  align-items: center;
  flex-direction: row;

  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
  /deep/ .el-radio {
    margin-right: 10px;
    transform: translateY(1px);
  }
  span {
    font-size: 14px;
    color: #606266;
    display: inline-block;
    // padding-left: 15px;
    &.span1 {
      padding-left: 15px;
      padding-right: 10px;
    }
    &.span2 {
      padding-left: 10px;
    }
  }
}
.limit_number {
  margin: 0 10px;
}
.save_container {
  padding: 0 20px;
  margin-top: 15px;
  &.positive {
    position: fixed;
    bottom: 50px;
    left: 0;
    z-index: 9999;
  }
}
.newConBox.on {
  margin-left: -10px;
  padding-left: 10px;
}
</style>
